<template>
	<div>
		<div @click.stop="dialogTableVisible=false" class="messagelistshow" :style="{'height':bodyheight+'px'}" v-show="dialogTableVisible"></div>
		<div class="rztk" v-show="dialogTableVisible">
			<img src="../../../static/img/images/rztk1.png" class="rztk_img" ref='imgHeight' :style="{'margin-top':-imgHeight1+'px'}" />
			<p class="rztk_p1">请您先完成以下任务</p>
			<div class="rztk_d1 clear2">
				<i class="el-icon-star-on rztk_i1"></i>
				<span class="rztk_s1">上传本人头像</span>
				<i class="el-icon-arrow-right rztk_i2"></i>
				<span class="rztk_s2" :class="list.is_head==1?'':'hui'">({{list.is_head==1?'已完成':'未完成'}})</span>
				
			</div>
			<div class="rztk_d1 clear2">
				<i class="el-icon-star-on rztk_i1"></i>
				<span class="rztk_s1">个人资料完善70%以上</span>
				<i class="el-icon-arrow-right rztk_i2"></i>
				<span class="rztk_s2" :class="list.is_degree==1?'':'hui'">({{list.is_degree==1?'已完成':'未完成'}})</span>
				
			</div>
			<div class="rztk_d1 clear2">
				<i class="el-icon-star-on rztk_i1"></i>
				<span class="rztk_s1">绑定个人手机号</span>
				<i class="el-icon-arrow-right rztk_i2"></i>
				<span class="rztk_s2" :class="list.is_phone==1?'':'hui'">({{list.is_phone==1?'已完成':'未完成'}})</span>
				
			</div>
			<div class="rztk_d1 clear2" v-if="list.gender==1">
				<i class="el-icon-star-on rztk_i1"></i>
				<span class="rztk_s1">实名认证</span>
				<i class="el-icon-arrow-right rztk_i2"></i>
				<span class="rztk_s2" :class="list.is_member_code==1?'':'hui'">({{(list.is_member_code==1)?'已完成':'未完成'}})</span>
				
			</div>
			<div class="rztk_d2" @click="jump">
				去完成
			</div>
			<div class="rztk_d3" @click.stop="dialogTableVisible=false">
				<i class="el-icon-close"></i>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		watch: {
			people(val) {
			},

		},
		props: [
			'people'
		],
		data: function() {
			return {
				list: {},
				bodyheight:0,
				imgHeight1:0,
				dialogTableVisible: false,
				rzTrue:true,
				
			}
		},
		mounted() {
			this.bodyheight=document.body.offsetHeight;
			setTimeout(()=>{
				this.imgHeight1=this.$refs.imgHeight.offsetHeight/2;
			},0)
			this.getUserAuthenticat();
		},
		methods: {
			jump(){
				if(this.list.is_degree==1){
					this.$router.push({
						path: '/wode/rzzx',
					})
				}
				else{
					this.$router.push({
						path: '/wode/wdzl',
					})
				}
				
			},
			handleParentClick(){
				this.dialogTableVisible=true;
				setTimeout(()=>{
					this.imgHeight1=this.$refs.imgHeight.offsetHeight/2;
				},0)
				
			},
			getUserAuthenticat() {
				this.$http.post(this.defines.getUserAuthenticat, {
						uid: window.uid
					}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.list=data.data.data;
							if(this.list.is_head!=1){
								this.rzTrue=false;
							}
							if(this.list.is_degree!=1){
								this.rzTrue=false;
							}
							if(this.list.is_phone!=1){
								this.rzTrue=false;
							}
							if(this.list.is_member_code!=1&&this.list.gender==1){
								this.rzTrue=false;
							}
							this.$emit('rzUp',this.rzTrue)
						},
						(error) => {
							console.log(error);
						}
					);

			},
		}
	}
</script>

<style scoped>
	.messagelistshow{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 20;
	}
	.rztk{
		background: #fff;
		width: 70%;
		left: 15%;
		top: 50%;
		transform: translate(0,-50%);
		position: fixed;
		z-index: 21;
	}
	.rztk_img{
		width: 70%;
		display: block;
		margin: 0 auto;
	}
	.rztk_p1{
		text-align: center;
		font-size: 1.6rem;
		line-height: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.rztk_d1{
		width: 90%;
		margin: 0 auto;
		font-size: 1.3rem;
		line-height: 2rem;
	}
	.rztk_i1{
		color: #ff4242;
		line-height: 2rem;
		
	}
	.rztk_s2{
		float: right;
		color: #ff4242;
	}
	.rztk_i2{
		float: right;
		color: #a7a7a7;
		line-height: 2rem;
	}
	.rztk_d2{
		width: 80%;
		color: #fff;
		background: #ff4242;
		font-size: 1.8rem;
		line-height: 3rem;
		text-align: center;
		margin: 2rem auto;
		border-radius: 5rem;
		margin-bottom: 0;
	}
	.rztk_d3{
		height: 4rem;
		width: 4rem;
		text-align: center;
		margin: 0 auto;
		transform: translate(0,150%);
		border-radius: 10rem;
		background: rgba(255,255,255,0.5);
		color: #000;
	}
	.rztk_d3 i{
		line-height: 4rem;
		color: #000;
		font-size: 3rem;
	}
	.hui{
		color: #a7a7a7;
	}
</style>